<!--
 * @Description: 用户端表单循环组件
 * @version: 电子名片2.0
 * @Author: 付小清
 * @Date: 2020-12-08 16:58:06
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-04-12 15:19:16
-->

<template>
  <div v-if="_show" class="form-box">
    <el-form ref="refForm" :size="size" label-width="150px" :model="_formData" :validate-on-rule-change="false">
      <el-form-item
        v-for="(item, index) in _formList"
        :key="index"
        :prop="item.key"
        :rules="formVerify[item.key]"
        :label="item.label"
      >
        <el-input v-model.number="_formData[item.key]" />
        <div class="sub-tips">{{ item.tips }}</div>
      </el-form-item>
      <el-form-item class="button-center">
        <el-button type="primary" @click="submitForm('ruleForm')">
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 接口
import { updateCommonConfig } from '@/api/basics'
// 公共方法
import { isNumber } from '@/utils/validate'
export default {
  props: {
    detail: {
      type: Object,
      default: () => {
        return {}
      }
    },
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    formVerify() {
      const _obj = {};
      function greaterOne(rule, value, callback, item) {
        if (rule.field === item.key && !isNumber(value)) {
          callback(new Error(`请输入正确的${item.label}`))
        } else {
          if (value < 1) {
            callback(new Error('不能小于1'))
          } else {
            callback()
          }
        }
      }
      const defaultUpstep = (rule, value, callback) => {
        if (
          this._formData.NEIGHBORHOOD_SETTINGS1 >
          this._formData.NEIGHBORHOOD_SETTINGS2
        ) {
          callback(new Error('扩大搜索范围不能小于默认搜索范围'))
        } else {
          callback()
        }
      }
      this.list.forEach(item => {
        _obj[item.key] = [
          { required: true, message: `请输入${item.label}`, trigger: 'blur' },
          { type: 'number', trigger: ['blur', 'change'], validator: (rule, value, callback) => greaterOne(rule, value, callback, item) }
        ]
        if(item.isDefaultUpstep) _obj[item.key].push({ type: 'number', trigger: ['blur', 'change'], validator: defaultUpstep })
      })
      return _obj;
    },
    size() {
      return this.$store.getters.size
    },
    _formData: {
      get() {
        return this.detail
      },
      set(val) {
        this.$emit('update:detail', val)
      }
    },
    _formList: {
      get() {
        return this.list
      },
      set(val) {
        this.$emit('update:list', val)
      }
    },
    _show: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  mounted() {},
  methods: {
    // 将对象改为数组
    dataDispose(formData) {
      const reqData = {
        code: '',
        content: '',
        settings: []
      }
      for (const i in formData) {
        // 排除关键词参数
        if (i !== 'detail_type') {
          reqData.settings.push({
            settingCode: i,
            settingContent: formData[i],
            settingGroup: reqData.code
          })
        } else {
          reqData.code = formData[i]
        }
      }
      return reqData
    },
    // 表单提交
    submitForm() {
      // 表单验证
      this.$refs.refForm.validate((valid) => {
        if (valid) {
          // 对数据进行重组改成后端需要的数据格式
          const formData = this.dataDispose(this._formData)
          updateCommonConfig(formData).then((res) => {
            if (res.code === 0) {
              this.$message.success('修改成功')
            }
          })
        } else {
          console.log('error submit!!')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
